.callout {
  .apply-callout-typography();
  .apply-callout-color();
}

html body[for='html-export'] .callout {
  --color-red: #e93147;
  --color-orange-rgb: 236, 117, 0;
  --color-orange: #ec7500;
  --color-yellow-rgb: 224, 172, 0;
  --color-yellow: #e0ac00;
  --color-green-rgb: 8, 185, 78;
  --color-green: #08b94e;
  --color-cyan-rgb: 0, 191, 188;
  --color-cyan: #00bfbc;
  --color-blue-rgb: 8, 109, 221;
  --color-blue: #086ddd;
  --color-purple-rgb: 120, 82, 238;
  --color-purple: #7852ee;
  --color-pink-rgb: 213, 57, 132;
  --color-pink: #d53984;
}

html body:not([for='html-export']) .callout {
  --color-red-rgb: 251, 70, 76;
  --color-red: #fb464c;
  --color-orange-rgb: 233, 151, 63;
  --color-orange: #e9973f;
  --color-yellow-rgb: 224, 222, 113;
  --color-yellow: #e0de71;
  --color-green-rgb: 68, 207, 110;
  --color-green: #44cf6e;
  --color-cyan-rgb: 83, 223, 221;
  --color-cyan: #53dfdd;
  --color-blue-rgb: 2, 122, 255;
  --color-blue: #027aff;
  --color-purple-rgb: 168, 130, 255;
  --color-purple: #a882ff;
  --color-pink-rgb: 250, 153, 205;
  --color-pink: #fa99cd;
}

.apply-callout-color() {
  --callout-default: var(--color-blue-rgb);

  --callout-summary: var(--color-cyan-rgb);
  --callout-info: var(--color-blue-rgb);
  --callout-todo: var(--color-blue-rgb);
  --callout-important: var(--color-cyan-rgb);
  --callout-tip: var(--color-cyan-rgb);
  --callout-success: var(--color-green-rgb);
  --callout-question: var(--color-orange-rgb);
  --callout-warning: var(--color-orange-rgb);
  --callout-fail: var(--color-red-rgb);
  --callout-error: var(--color-red-rgb);
  --callout-bug: var(--color-red-rgb);
  --callout-example: var(--color-purple-rgb);
  --callout-quote: 158, 158, 158;

  // default callout
  --callout-color: var(--callout-default);
  --callout-icon: lucide-pencil;

  // abstract, summary, tldr
  &[data-callout='abstract'],
  &[data-callout='summary'],
  &[data-callout='tldr'] {
    --callout-color: var(--callout-summary);
    --callout-icon: lucide-clipboard-list;
  }

  // info
  &[data-callout='info'] {
    --callout-color: var(--callout-info);
    --callout-icon: lucide-info;
  }

  // todo
  &[data-callout='todo'] {
    --callout-color: var(--callout-todo);
    --callout-icon: lucide-check-circle-2;
  }

  // important
  &[data-callout='important'] {
    --callout-color: var(--callout-important);
    --callout-icon: lucide-flame;
  }

  // hint, tip
  &[data-callout='hint'],
  &[data-callout='tip'] {
    --callout-color: var(--callout-tip);
    --callout-icon: lucide-flame;
  }

  // check, done, success
  &[data-callout='check'],
  &[data-callout='done'],
  &[data-callout='success'] {
    --callout-color: var(--callout-success);
    --callout-icon: lucide-check;
  }

  // faq, help, question
  &[data-callout='faq'],
  &[data-callout='help'],
  &[data-callout='question'] {
    --callout-color: var(--callout-question);
    --callout-icon: help-circle;
  }

  // attention, caution, warning
  &[data-callout='attention'],
  &[data-callout='caution'],
  &[data-callout='warning'] {
    --callout-color: var(--callout-warning);
    --callout-icon: lucide-alert-triangle;
  }

  // fail, failure, missing
  &[data-callout='fail'],
  &[data-callout='failure'],
  &[data-callout='missing'] {
    --callout-color: var(--callout-fail);
    --callout-icon: lucide-x;
  }

  // danger, error
  &[data-callout='danger'],
  &[data-callout='error'] {
    --callout-color: var(--callout-error);
    --callout-icon: lucide-zap;
  }

  // bug
  &[data-callout='bug'] {
    --callout-color: var(--callout-bug);
    --callout-icon: lucide-bug;
  }

  // example
  &[data-callout='example'] {
    --callout-color: var(--callout-example);
    --callout-icon: lucide-list;
  }

  // cite, quote
  &[data-callout='cite'],
  &[data-callout='quote'] {
    --callout-color: var(--callout-quote);
    --callout-icon: quote-glyph;
  }
}

/**
 * Apply callout typography
 * https://github.com/439qi/vscode-markdown-obsidian-callouts
 */
.apply-callout-typography() {
  overflow: hidden;
  border-style: solid;
  border-color: rgba(var(--callout-color), 0.25);
  border-width: 0;
  border-radius: 0;
  margin: 1em 0;
  background-color: rgba(var(--callout-color), 0.1);
  padding: 12px 12px 12px;

  &.is-collapsible .callout-title {
    cursor: pointer;
  }

  .callout-title {
    padding: 0;
    display: flex;
    gap: 0;
    font-size: inherit;
    color: rgb(var(--callout-color));
    line-height: 1.3;
    align-items: flex-start;

    .callout-icon {
      flex: 0 0 auto;
      display: flex;
      align-items: center;

      .svg-icon {
        color: rgb(var(--callout-color));
        height: 18px;
        width: 18px;
        padding-right: 4px;
      }

      &::after {
        content: '​';
      }
    }

    .callout-title-inner {
      font-weight: 600;
      color: inherit;
    }

    .callout-fold {
      display: flex;
      align-items: center;
      padding-inline-end: 8px;

      &::after {
        content: '';
      }

      .svg-icon {
        transition: transform 0.1s ease-in-out;
      }
    }
  }

  .callout-content {
    overflow-x: auto;
    padding: 0;
    background-color: transparent;
    margin-top: 20px;
  }

  details[open] .callout-fold svg.svg-icon {
    transform: rotate(calc(1 * 90deg));
  }
}
